<template>
  <view class="cinema-container">
   <!-- 顶部导航 -->
   <view class="nav">
      <text class="location">南充</text>
      <text class="title">影院</text>
      <!-- 将文字改为图片 -->
      <view class="search-box" @tap="goToSearch">
        <image 
          class="search-icon" 
          src="/static/images/search.png"
          mode="aspectFit"
        ></image>
      </view>
    </view>

    <!-- 影院列表 -->
    <view class="main-content">
      <view 
        class="cinema-item" 
        v-for="(item, index) in cinemaList" 
        :key="index"
        @tap="goToCinemaDetail(item.id)"
      >
        <view class="cinema-info">
          <text class="name">{{ item.name }}</text>
          <text class="address">{{ item.specified_address }}</text>
          <view class="label-block">
            <text class="label">小吃</text>
            <text class="label">4D厅</text>
            <text class="label">巨幕厅</text>
            <text class="label">杜比全景声厅</text>
          </view>
          <view class="divider"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cinemaList: []
    }
  },
  onLoad() {
    this.loadCinemaInfo()
  },
  methods: {
    // 跳转到搜索页面
    goToSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },
    // 跳转到影院详情页
    goToCinemaDetail(cinemaId) {
      uni.navigateTo({
        url: `/pages/cinema-detail/cinema-detail?cinema_id=${cinemaId}`
      })
    },
    // 加载影院列表
    loadCinemaInfo() {
      uni.request({
        url: 'http://localhost:9090/findCinemaListForApp',
        method: 'GET',
        success: (res) => {
          if (res.data.code === 1) {
            this.cinemaList = res.data.cinemas
          } else {
            uni.showToast({
              title: '获取影院列表失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          console.log(err)
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style>
.cinema-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 120rpx;
  background-color: rgba(3,3,3,0.67);
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.location {
  width: 20%;
  padding-left: 30rpx;
  font-size: 36rpx;
}

.title {
  width: 60%;
  text-align: center;
  font-size: 36rpx;
}
/* 修改搜索图标的样式 */
.search-box {
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon {
  width: 48rpx;
  height: 48rpx;
}

.main-content {
  padding-top: 120rpx;
  font-size: 32rpx;
}

.cinema-item {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.cinema-info {
  padding: 30rpx;
}

.name {
  font-size: 36rpx;
  line-height: 50rpx;
  margin-bottom: 20rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.address {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.label-block {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}

.label {
  padding: 4rpx 8rpx;
  font-size: 24rpx;
  border: 1rpx solid #f90;
  margin-right: 16rpx;
  border-radius: 4rpx;
  color: #f90;
}

.divider {
  height: 1rpx;
  background-color: #eee;
  margin-top: 20rpx;
}
</style>